CSS Marker: Xalqaro Auditoriya Uchun Roʻyxat Elementlarini Moslashtirilgan Uslubda Bezatishni Oʻzlashtirish

Roʻyxatlar veb-dizayndagi asosiy elementlar boʻlib, maʼlumotlarni aniq va tartibli tarzda taqdim etish uchun keng qoʻllaniladi. HTML tomonidan taqdim etilgan standart roʻyxat uslublari (<ul> va <ol>) funksional boʻlsa-da, ular koʻpincha zamonaviy veb-ilovalar uchun talab qilinadigan vizual jozibadorlik va moslashtirish imkoniyatlariga ega emas. CSS ::marker pseudo-elementi roʻyxat elementlari markerlarini uslublash uchun kuchli va koʻp qirrali vositani taqdim etadi, bu esa dasturchilarga ularning tashqi koʻrinishi va xususiyatlari ustidan toʻliq nazorat qilish imkonini beradi. Ushbu keng qamrovli qoʻllanmada ::marker imkoniyatlari oʻrganilib, global auditoriya uchun vizual jihatdan ajoyib va qulay roʻyxatlar yaratish yoʻllari koʻrsatiladi.

CSS Markerlari Asoslarini Tushunish

Ilgʻor texnikalarni oʻrganishdan oldin, CSS markerlarining asosiy tushunchalarini tushunish muhimdir. Roʻyxat elementi markerlari — bu roʻyxatdagi har bir element oldida turadigan belgilar yoki raqamlardir. Bu markerlar brauzer tomonidan avtomatik ravishda yaratiladi va ularni CSS yordamida uslublash mumkin.

::marker Pseudo-elementi nima?

::marker pseudo-elementi roʻyxat elementining marker qutisini tanlash va uslublash imkonini beradi. Bu pseudo-element markerning tashqi koʻrinishiga bevosita taʼsir qiluvchi bir nechta CSS xususiyatlariga kirishni taʼminlaydi, jumladan:

• color: Markerning rangini belgilaydi.
• font: Markerning shrift oilasi, oʻlchami, qalinligi va uslubini boshqaradi.
• content: Standart markerni matn yoki tasvirlar kabi maxsus kontent bilan almashtirish imkonini beradi.
• text-orientation: Marker ichidagi matnning yoʻnalishini belgilaydi.

Ushbu xususiyatlar vizual jozibador va maʼlumotga boy roʻyxatlar yaratishga imkon beruvchi keng koʻlamli uslublash imkoniyatlarini taqdim etadi.

Asosiy Sintaksis

Roʻyxat elementi markerini uslublash uchun siz CSS qoidangizda ::marker pseudo-elementidan foydalanasiz:

            li::marker {
  color: blue;
  font-weight: bold;
}

            

              
                Copy
              
            
          

Ushbu oddiy misol marker rangini koʻk rangga oʻrnatadi va shriftni qalin qiladi.

list-style-type bilan Roʻyxat Elementi Markerlarini Moslashtirish

list-style-type xususiyati roʻyxat elementi markerlarining koʻrinishini oʻzgartirishning oddiy usulini taklif etadi. U tartiblangan va tartiblanmagan roʻyxatlar uchun turli xil oldindan belgilangan marker uslublarini taqdim etadi.

Tartiblangan Roʻyxat Uslublari

Tartiblangan roʻyxatlar (<ol>) uchun siz bir nechta raqamli va harfli uslublardan birini tanlashingiz mumkin:

• decimal: Oʻnlik sonlar (1, 2, 3, ...).
• lower-roman: Kichik harfli Rim raqamlari (i, ii, iii, ...).
• upper-roman: Katta harfli Rim raqamlari (I, II, III, ...).
• lower-alpha: Kichik harflar (a, b, c, ...).
• upper-alpha: Katta harflar (A, B, C, ...).
• georgian: Gruzin raqamlari (ა, ბ, გ, ...). Gruzin tilida ishlatiladi.
• armenian: Arman raqamlari (Ա, Բ, Գ, ...). Arman tilida ishlatiladi.

Misol:

            ol {
  list-style-type: lower-roman;
}

            

              
                Copy
              
            
          

Tartiblanmagan Roʻyxat Uslublari

Tartiblanmagan roʻyxatlar (<ul>) uchun siz turli xil ramziy uslublardan birini tanlashingiz mumkin:

• disc: Toʻldirilgan doira (standart).
• circle: Boʻsh doira.
• square: Toʻldirilgan kvadrat.
• none: Marker koʻrsatilmaydi.

Misol:

            ul {
  list-style-type: square;
}

            

              
                Copy
              
            
          

list-style Qisqa Xususiyati

list-style xususiyati list-style-type, list-style-position va list-style-image ni bitta eʼlonga birlashtiradigan qisqa yozuvdir. Bu sizning CSS-ni soddalashtirishi va oʻqishni osonlashtirishi mumkin.

Misol:

            ul {
  list-style: square inside url("example.png");
}

            

              
                Copy
              
            
          

Bu roʻyxat uslubini kvadrat markerga oʻrnatadi, markerni roʻyxat elementi ichiga joylashtiradi va marker sifatida tasvirdan foydalanadi.

::marker bilan Kengaytirilgan Uslublash

list-style-type asosiy marker uslublarini tezda oʻrnatish imkonini bersa-da, ::marker pseudo-elementi ancha katta moslashuvchanlikni taklif etadi. U markerlarning koʻrinishini nozik sozlash va noyob vizual effektlar yaratish imkonini beradi.

Marker Rangi va Shriftini Oʻzgartirish

Siz color va font xususiyatlaridan foydalanib, roʻyxat elementi markerlarining rangi va shriftini osongina oʻzgartirishingiz mumkin:

            li::marker {
  color: #e44d26; /* Yorqin to'q sariq rang */
  font-family: 'Arial', sans-serif;
  font-size: 1.2em;
}

            

              
                Copy
              
            
          

Bu misol marker rangini yorqin toʻq sariq rangga oʻrnatadi va biroz kattaroq shrift oʻlchamiga ega Arial shriftidan foydalanadi.

Maxsus Kontentdan Foydalanish

content xususiyati standart markerni maxsus matn yoki tasvirlar bilan almashtirish imkonini beradi. Bu keng ijodiy imkoniyatlarni ochib beradi.

Misol: Unicode belgilarini marker sifatida ishlatish:

            li::marker {
  content: "\2713  "; /* Tasdiqlash belgisi */
  color: green;
}

            

              
                Copy
              
            
          

Bu kod standart markerni yashil tasdiqlash belgisi bilan almashtiradi.

Misol: Tasvirlarni marker sifatida ishlatish (garchi tasvirlar uchun odatda list-style-image afzal koʻrilsa ham):

            li::marker {
  content: url("arrow.png");
}

            

              
                Copy
              
            
          

Bu markerni URL manzilida koʻrsatilgan tasvir bilan almashtiradi. Eʼtibor bering, `list-style-image` koʻpincha tasvir oʻlchami va joylashuvini yaxshiroq nazorat qilishni taʼminlaydi.

Turli Tillar va Yozuvlar Uchun Markerlarni Uslublash

Global auditoriya uchun veb-saytlar yaratishda turli tillar va yozuvlarning oʻziga xos ehtiyojlarini hisobga olish juda muhim. CSS roʻyxat elementi markerlarini turli lingvistik kontekstlarga moslashtirishga yordam beradigan bir nechta xususiyatlarni taqdim etadi.

Turli Madaniyatlar Uchun Raqam Tizimlaridan Foydalanish

Tartiblangan roʻyxatlarni turli madaniyatlarga xos boʻlgan raqam tizimlaridan foydalanish uchun moslashtirish mumkin. Masalan, siz oʻsha tillardagi roʻyxatlar uchun arman yoki gruzin raqamlaridan foydalanishingiz mumkin.

            ol.armenian {
  list-style-type: armenian;
}

ol.georgian {
  list-style-type: georgian;
}

            

              
                Copy
              
            
          

Oʻngdan Chapga Yoziladigan Tillarni Boshqarish

Arab va ibroniy kabi oʻngdan chapga (RTL) yoziladigan tillar uchun matn bilan toʻgʻri moslashishini taʼminlash uchun markerning oʻrnini oʻzgartirish kerak boʻlishi mumkin. Bunga direction xususiyati yordamida erishish mumkin.

            ul.rtl {
  direction: rtl;
}

ul.rtl li::marker {
  /* Uslublarni kerak bo'lganda sozlang */
}

            

              
                Copy
              
            
          

Vertikal Matn Yoʻnalishi

Anʼanaviy moʻgʻul tili kabi vertikal matndan foydalanadigan tillar uchun siz marker matnini vertikal yoʻnaltirish uchun text-orientation xususiyatidan foydalanishingiz mumkin.

            li::marker {
  text-orientation: upright;
  writing-mode: vertical-lr; /* Yoki vertical-rl */
}

            

              
                Copy
              
            
          

Eʼtibor bering, vertikal matnni toʻgʻri koʻrsatish uchun `li` elementining oʻzida yoki uni oʻz ichiga olgan elementda `writing-mode` xususiyati kerak boʻlishi mumkin.

Qulaylik Masalalari

Roʻyxat elementi markerlarini moslashtirishda qulaylikka ustuvor ahamiyat berish muhim. Markerlaringiz vizual jihatdan ajralib turishiga va fon bilan yetarli kontrastni taʼminlashiga ishonch hosil qiling. Shuningdek, ekran oʻquvchilari yoki boshqa yordamchi texnologiyalardan foydalanayotgan foydalanuvchilarni ham hisobga oling.

Semantik HTML

Roʻyxatlar uchun har doim semantik HTML elementlaridan (<ul>, <ol>, <li>) foydalaning. Bu yordamchi texnologiyalarga izohlash uchun aniq tuzilmani taqdim etadi.

Yetarli Kontrast

Marker rangining fon bilan yetarli kontrastni taʼminlashiga ishonch hosil qiling. Bu, ayniqsa, koʻrishda nuqsoni boʻlgan foydalanuvchilar uchun muhimdir. Kontrast nisbatlarini tekshirish uchun WebAIM Contrast Checker kabi vositalardan foydalaning.

Ekran Oʻquvchilari bilan Moslik

Markerlar toʻgʻri eʼlon qilinishiga ishonch hosil qilish uchun roʻyxatlaringizni ekran oʻquvchilari bilan sinab koʻring. Ekran oʻquvchilari odatda roʻyxat elementlarining mavjudligini eʼlon qilsalar-da, ular har doim ham maxsus marker kontentini eʼlon qilmasligi mumkin. Agar kerak boʻlsa, qoʻshimcha kontekstni taʼminlash uchun ARIA atributlarini qoʻshishni oʻylab koʻring. Masalan, agar maxsus marker tabiiy ravishda maʼnoli oʻqilmasa, `aria-label` yordam berishi mumkin.

Amaliy Misollar va Qoʻllash Holatlari

CSS markerlarining kuchini koʻrsatish uchun baʼzi amaliy misollar va qoʻllash holatlarini koʻrib chiqamiz.

Vazifalar Roʻyxatini Yaratish

Siz bajarilgan vazifalar uchun tasdiqlash belgilari bilan vizual jozibador vazifalar roʻyxatini yaratish uchun maxsus markerlardan foydalanishingiz mumkin.

            <ul class="task-list">
  <li>Taqdimot slaydlarini tayyorlash</li>
  <li class="completed">Uchrashuv taklifnomalarini yuborish</li>
  <li>Loyiha taklifini yakunlash</li>
</ul>

            

              
                Copy
              
            
          

            .task-list li::marker {
  content: "\25CB  "; /* Bo'sh doira */
  color: #777;
}

.task-list li.completed::marker {
  content: "\2713  "; /* Tasdiqlash belgisi */
  color: green;
}

            

              
                Copy
              
            
          

Mundarijani Uslublash

Maxsus markerlar mundarijaning koʻrinishini yaxshilashi, uni yanada vizual jozibador qilishi mumkin.

            <ol class="toc">
  <li><a href="#introduction">Kirish</a></li>
  <li><a href="#customization">Moslashtirish Imkoniyatlari</a></li>
  <li><a href="#accessibility">Qulaylik Masalalari</a></li>
  <li><a href="#conclusion">Xulosa</a></li>
</ol>

            

              
                Copy
              
            
          

            .toc {
  list-style: none; /* Standart raqamlarni olib tashlash */
  padding-left: 0;
}

.toc li::before {
  content: counter(list-item) ". ";
  display: inline-block;
  width: 2em; /* Kerak bo'lganda sozlang */
  text-align: right;
  color: #333;
  margin-left: -2em; /* Raqamlarni to'g'ri joylashtirish */
}

.toc {
  counter-reset: list-item;
}

.toc li {
  counter-increment: list-item;
}

            

              
                Copy
              
            
          

Bu holda, biz kerakli raqamlash formatiga erishish uchun `::marker` oʻrniga CSS hisoblagichlari bilan birga `::before` pseudo-elementidan foydalanmoqdamiz. Misol, shuningdek, standart raqamlashni olib tashlaydi va moslashtirilgan uslublarni qoʻllaydi. Bu yondashuv sizga raqamlarning joylashuvi va formatlanishi ustidan koʻproq nazorat beradi.

Jarayon Kuzatuvchisini Yaratish

CSS markerlari koʻp bosqichli jarayondagi yutuqlarni vizual tarzda aks ettirish uchun ishlatilishi mumkin.

            <ol class="progress-tracker">
  <li class="completed">1-qadam: Boshlang'ich sozlash</li>
  <li class="completed">2-qadam: Ma'lumotlarni sozlash</li>
  <li class="active">3-qadam: Tizimni sinovdan o'tkazish</li>
  <li>4-qadam: Joylashtirish</li>
</ol>

            

              
                Copy
              
            
          

            .progress-tracker {
  list-style: none;
  padding-left: 0;
}

.progress-tracker li::before {
  content: "\25CB"; /* Standart bo'sh doira */
  display: inline-block;
  width: 1.5em;
  text-align: center;
  color: #ccc;
  margin-right: 0.5em;
}

.progress-tracker li.completed::before {
  content: "\2713"; /* Bajarilgan qadamlar uchun tasdiqlash belgisi */
  color: green;
}

.progress-tracker li.active::before {
  content: "\25CF"; /* Faol qadam uchun to'ldirilgan doira */
  color: blue;
}

            

              
                Copy
              
            
          

CSS Markerlaridan Foydalanish Boʻyicha Eng Yaxshi Amaliyotlar

CSS markerlaridan samarali foydalanayotganingizga ishonch hosil qilish uchun quyidagi eng yaxshi amaliyotlarni koʻrib chiqing:

• Semantik HTML-dan foydalaning: Roʻyxatlar uchun har doim <ul>, <ol> va <li> elementlaridan foydalaning.
• Qulaylikka ustuvor ahamiyat bering: Yetarli kontrastni taʼminlang va ekran oʻquvchilari bilan sinab koʻring.
• Izchillikni saqlang: Veb-saytingiz boʻylab izchil marker uslublaridan foydalaning.
• Internatsionallashtirishni hisobga oling: Marker uslublarini turli tillar va yozuvlarga moslashtiring.
• Brauzerlar boʻylab sinovdan oʻtkazing: Marker uslublaringiz turli brauzerlarda toʻgʻri koʻrsatilishini tekshiring.

Brauzer Mosligi

::marker pseudo-elementi Chrome, Firefox, Safari va Edge kabi zamonaviy brauzerlarda keng qoʻllab-quvvatlanadi. Biroq, Internet Explorer-ning eski versiyalari uni toʻliq qoʻllab-quvvatlamasligi mumkin. Moslikni taʼminlash uchun kodingizni har doim turli brauzerlarda sinab koʻring.

::marker ga Alternativalar

::marker kuchli boʻlsa-da, muqobil yondashuvlar yanada mosroq boʻlishi mumkin boʻlgan holatlar mavjud. Agar siz eski brauzerlarni qoʻllab-quvvatlashingiz kerak boʻlsa yoki murakkabroq uslublash talab qilinsa, quyidagi texnikalardan foydalanishni koʻrib chiqing:

• ::before va ::after dan foydalanish: Siz ::before yoki ::after pseudo-elementlari yordamida maxsus markerlar yaratishingiz va ularni roʻyxat elementiga nisbatan joylashtirishingiz mumkin. Bu joylashuv va uslublash ustidan koʻproq nazoratni taʼminlaydi, lekin koʻproq kod talab qiladi.
• Fon tasvirlaridan foydalanish: Siz maxsus markerlar yaratish uchun fon tasvirlaridan foydalanishingiz mumkin. Bu har qanday tasvirni marker sifatida ishlatishga imkon beruvchi moslashuvchan yondashuvdir.
• JavaScript-dan foydalanish: Juda dinamik yoki murakkab marker uslublari uchun siz DOM-ni boshqarish va maxsus markerlar yaratish uchun JavaScript-dan foydalanishingiz mumkin.

Ushbu texnikalarning har birining oʻz afzalliklari va kamchiliklari bor, shuning uchun oʻzingizning maxsus ehtiyojlaringizga eng mos keladigan yondashuvni tanlang.

Xulosa

CSS markerlari roʻyxat elementi uslublarini moslashtirish uchun kuchli va koʻp qirrali vositani taqdim etadi. ::marker pseudo-elementini oʻzlashtirib va uning imkoniyatlarini tushunib, siz global auditoriya uchun vizual jihatdan ajoyib va qulay roʻyxatlar yaratishingiz mumkin. Roʻyxatlaringizni loyihalashda qulaylikka ustuvor ahamiyat berishni, izchillikni saqlashni va internatsionallashtirishni hisobga olishni unutmang. Ozgina ijodkorlik va detallarga eʼtibor bilan siz oddiy roʻyxatlarni veb-saytingiz yoki ilovangizning foydalanuvchi tajribasini oshiradigan jozibali va maʼlumotga boy elementlarga aylantirishingiz mumkin. Veb-dizayningizni yuksaltirish va haqiqatan ham ajoyib foydalanuvchi interfeyslarini yaratish uchun CSS markerlarining kuchidan foydalaning.